<template>
	<view class="home">
		<headbar style="text-align: center;">
			<text>鲨鱼辣椒</text>
		</headbar>
		<view class="home_main">
			<uni-search-bar placeholder="搜索" @confirm="search" :radius="100" cancelButton="none" clearButton="auto" />
			<view class="uni-margin-wrap">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" indicator-color="#fff">
					<swiper-item>
						<image src="/static/img/baner.jpeg" mode="" style="border-radius: 10px;"></image>
					</swiper-item>
					<swiper-item style="border-radius: 10px;">
						<image src="/static/img/banner1.jpeg" mode="" style="border-radius: 10px;"></image>
					</swiper-item>
					<swiper-item style="border-radius: 10px;">
						<image src="/static/img/banner2.jpeg" mode="" style="border-radius: 10px;"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="home_grid">
				<uni-grid :column="3" :showBorder="false" :square="false">
					<uni-grid-item>
						<view class="home_grid_item">
							<image src="/static/img/xqgg.png" mode=""></image>
							<text class="text">鲨鱼</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="home_grid_item">
							<image src="/static/img/jy.png" mode=""></image>
							<text class="text">鲨鱼</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="home_grid_item">
							<image src="/static/img/fwcz.png" mode=""></image>
							<text class="text">鲨鱼</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="home_list_taber">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="pink" />
				</view>
			</view>

			<view class="home_list_box">
				<transverseListvue />
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import headbar from '@/components/headbar.vue'
	import transverseListvue from '@/pages/list/transverseList.vue'
	let dataObj = {
		name: 'shayu2'
	}
	const current = ref(0)
	const items = ['11111', '22222', '333333']
	const onClickItem = (e) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}
</script>
<style>
	body,
	page {
		background: #eee;
	}
</style>

<style lang="scss" scoped>
	.home {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.home_main {
		padding: 30rpx;
		padding-top: 10rpx;
		flex: 1;
		overflow-y: auto;

		.uni-searchbar {
			padding: 0 !important;

			.uni-searchbar__box {
				border: solid 1px pink;
			}
		}

		.uni-margin-wrap {
			margin-top: 20rpx;
			border-radius: 10rpx;

			.swiper {
				height: 320rpx;
			}

			.swiper-item {
				border-radius: 10rpx;
			}

			image {
				width: inherit;
				height: 100%;
			}
		}

		.home_grid {
			margin-top: 20rpx;
			text-align: center;
			background: #fff;
			padding: 12px;
			border-radius: 10px;

			.uni-grid-wrap {
				background: #fff;
				border-radius: 10px;
				padding: 16px;
				box-sizing: border-box;
			}

			.home_grid_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 10rpx;

				.text {
					font-size: 30rpx;
					font-weight: 600;
				}

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.uni-padding-wrap {
			margin-top: 20rpx;
		}

		.home_list_taber {
			margin-top: 20rpx;
			background: #fff;
			border-radius: 10px;
			padding: 0 12px;
			padding-bottom: 10px;
			position: -webkit-sticky;
			margin-bottom: 20rpx;
		}


	}
</style>